<template>
    <div>
         <div class="layout-main">
            <el-row style="margin-bottom:12px">
                <el-button v-on:click="add()" size="small" type="primary">添加</el-button>
            </el-row>
            <el-tree :props="options" :data="sysMenus" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label }}</span>
                    <span>
                        <el-button type="text" size="mini" @click="() => addSub(data)" v-if="data.parentId==0">
                            添加子菜单
                        </el-button>
                        <el-button type="text" size="mini" @click="() => modify(data)">
                            修改
                        </el-button>
                        <el-button type="text" size="mini" @click="() => doDelete(data)">
                            删除
                        </el-button>
                    </span>
                </span>
            </el-tree>
        </div>
    </div>
</template>
<script>
export default {
    name: 'SysMenu',
    data() {
        return {
            loading: false,
            options: {
                label: "title",
                children: "childs"
            },
            queryParams: {

            },
            others: {

            },
            sysMenu: {

            },
            sysMenus: [

            ],
            page: {
                total: 0,
                current: 1,
                pageSize: 10
            }
        };
    },
    mounted: function() {
        this.getList();

    },
    methods: {


        getList: function() {
            var me = this;
            me.showLoading();
            me.loading = true;
            me.$http.post("/sys/sysmenu/getall.action", {}).then(response => {
                var body = response;
                me.hideLoading();
                if (body.status == 0) {

                    me.sysMenus = body.obj;

                }
                me.loading = false;
            }, response => {
                me.hideLoading();
                me.loading = false;
            });
        },
        delete: function(id) {
            var me = this;
            me.$Modal.confirm({
                title: "提示",
                content: "是否执行该操作",
                onOk: function() {
                    me.$http.post("/sys/sysmenu/doDelete.action", { id: id }).then(response => {
                        var body = response;
                        if (body.status == 0) {
                            me.getList();

                        } else {
                            me.errorMessage(body.info);
                        }
                    }).catch(error => {

                    });
                },
                onCancel: function() {

                }
            });
        },
        modify: function(row) {
            this.$router.push({ name: 'SysMenuEdit', params: { sysMenuId: row.id } });
        },
        add: function() {

            this.$router.push({ name: "SysMenuAdd" });
        },
        addSub: function(row) {

            this.$router.push({ name: "SysMenuAdd", query: { parentId: row.id } });
        }
    }
}
</script>
<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>